@use '../variables';

$block: '.#{variables.$ns}skeleton';

#{$block} {
    --_--animation-from: calc(-100% * var(--g-flow-direction));
    --_--animation-to: calc(100% * var(--g-flow-direction));
    --_--gradient-deg: calc(90deg * var(--g-flow-direction));

    display: inline-block;
    position: relative;
    z-index: 0;
    width: 100%;
    border-radius: 5px;
    overflow: hidden;

    background-color: var(--g-color-base-generic);

    &_animation_gradient {
        &::after {
            position: absolute;
            inset: 0;
            content: '';
            background-image: linear-gradient(
                var(--_--gradient-deg),
                transparent,
                var(--g-color-base-generic)
            );
            animation: #{variables.$ns}skeleton 1.2s ease-out infinite;

            @media (prefers-reduced-motion: reduce) {
                animation: none;
            }
        }
    }

    &_animation_pulse {
        animation: #{variables.$ns}skeletonPulse 1.5s infinite linear;
    }
}

@keyframes #{variables.$ns}skeleton {
    0% {
        transform: translateX(var(--_--animation-from));
    }

    100% {
        transform: translateX(var(--_--animation-to));
    }
}

@keyframes #{variables.$ns}skeletonPulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}
